<template>
	<view>
		<view class="nav-bar">
			<!-- 自定义导航栏内容 -->
			<view class="title">
				<view class="title_text">
					<view class="title_text_img"><img src='../../static/Slice 36@2x.png' /></view>
					<view>极享客 | </view>
					<view class="text">借钱不用愁</view>
				</view>
				<view class="ke_img">
					<img src="../../static/ke.png"/>
				</view>
			</view>
			<!--  -->
			<view class="perfect">
				<view class="perfect_title">
					<view><img src='../../static/Slice 37@2x.png' /></view>
					精选
				</view>
				<view class="perfect_txt">最高可借额度(元)</view>
				<view class="perfect_num">20000</view>
				<view class="perfect_dis">
					<view class="perfect_dis_item">
						<view><img src='../../static/Slice 40@2x.png' /></view>审核简单
					</view>
					<view class="perfect_dis_item">
						<view><img src='../../static/Slice 40@2x.png' /></view>快速放款
					</view>
					<view class="perfect_dis_item">
						<view><img src='../../static/Slice 40@2x.png' /></view>随借随坏
					</view>
				</view>
				<view class="perfect_btn">
					<view class="Rapid_approval">极速审批</view>
					<button @click="ImmediatelyFn()">立即测算额度</button>
					<!-- <view class="Rapid_approval_view">
						<view class="Rapid_approval_view_text1">审核中</view>
						<view class="Rapid_approval_view_text2">点击刷新审核结果</view>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 通告栏 -->
		<view class="noticeBar">
			<img style="width: 60rpx;height: 60rpx;margin-top: 10rpx; margin-left: 20rpx; margin-right: 20rpx;"
				src='../../static/Slice 41@2x.png' />
			<view class="noticeBar_partition"></view>
			<swiper class="list" circular="true" vertical="true" autoplay="true" interval="3000" duration="1000">
				<swiper-item v-for="item in noticeList" :key="item.id" @click="handleInfo(item.id)">
					{{ item.title }}
				</swiper-item>
			</swiper>
			<!-- <uni-icons type="right" size="20" color="#999" style="margin-right: 15rpx;" /> -->
		</view>
		<!-- 您有额度点击待领取 -->
		<view class="Limit">
			<img src='../../static/Slice 42@2x.png' />
		</view>
		<!-- 了解我们 -->
		<view class="KnowUs">
			<view class="KnowUs_title">了解我们</view>
			<view class="KnowUs_about" @click="AboutUsFn()">
				<view class="KnowUs_about_left">
					<view class="text">关于我们</view>
					<view class="text_con">领先的金融数字科技公司</view>
				</view>
				<view class="KnowUs_about_right">
					了解详情 <img src='../../static/12.png' />
				</view>
			</view>
			<view class="KnowUs_R">
				<view class="KnowUs_repayment" @click="repaymentFn()">
					借还款指南
					<text class="KnowUs_label degclory">新手必读</text>
				</view>
				<view class="KnowUs_Fraud" @click="FraudFn()">
					诈骗指南
					<text class="KnowUs_label degclorr">财产安全</text>
				</view>
			</view>
		</view>

		<!-- 免责声明 -->
		<view class="Disclaimers">
			<view class="Disclaimers_title">
				<view class="Disclaimers_xian"></view> 免责声明 <view class="Disclaimers_xian1"></view>
			</view>
			<view class="Disclaimers_text">本页面非任何法律文件，所有的产品推广仅限参考，用户在点击产品前，请先阅读告知书。
				<br />切记：所有贷款过程中遇到的预先收费均属诈骗！请保持警惕避免损失。
			</view>
		</view>


		<!-- 提示登录 -->
		<view class="Prompt_login" v-if='LoginStatus == null'>
			<view class="Prompt_login_left">
				<view class=""></view>
				<view class="Prompt_login_left_text">
					<text>欢迎来到极享有钱~</text>
					<view>赶快登录，更多惊喜等着你</view>
				</view>

			</view>
			<view class="Prompt_login_buttom" @click="loginFn()">马上登录</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				LoginStatus:null,
				noticeList: [{
					title: "公告1",
					id: 1
				}, {
					title: "公告2",
					id: 2
				}, {
					title: "公告3",
					id: 3
				}, {
					title: "公告4",
					id: 4
				}, {
					title: "公告5",
					id: 5
				}, ],
				LoginStatus:null,
			}
		},
		created(){
			this.LoginStatus = this.$store.state.m_cart.LoginStatus
			console.log(this.$store.state)
		},
		methods: {
			FraudFn() {
				uni.navigateTo({
					url: '/pages/message/AntiFraud'
				});
			},
			repaymentFn() {
				uni.navigateTo({
					url: '/pages/message/repayment'
				});
			},
			AboutUsFn() {
				uni.navigateTo({
					url: '/pages/message/About'
				});
			},
			ImmediatelyFn() {

				uni.navigateTo({
					url: '/pages/message/identity/identity?param1=0'
				});

			},
			loginFn() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}

	}
</script>
<style lang="scss" scoped>
	.nav-bar {
		width: 100%;
		height: 592rpx;
		// border: 1px solid red;
		/* 导航栏高度 */
		padding-top: env(safe-area-inset-top);
		/* 适配 iPhone X 及以上刘海屏 */
		background: linear-gradient(180deg, #0063FE 0%, #2253FF 42%, rgba(194, 207, 255, 0) 100%);
		/* 默认背景色 */
	}

	.title {
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin-left: 40rpx;
		// margin: 0 auto;
		color: #fff;
		font-weight: 400;
		font-size: 32rpx;

		.title_text {
			display: flex;
			line-height: 88rpx;

			// justify-items: center;
			// align-items: center;
			.title_text_img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
				margin-top: 8rpx;

				img {
					width: 100%;
				}
			}
		}

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 16rpx;
			margin-top: 5rpx;
		}
	}


	.perfect {
		width: 670rpx;
		height: 492rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #FFFFFF;
		margin: 0 auto;
		margin-top: 10rpx;

		.perfect_title {
			// width: 64rpx;
			height: 44rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
			padding-left: 44rpx;
			margin-top: 38rpx;
			// vertical-align: middle;
			display: flex;
			justify-self: center;
			align-items: center;

			img {
				width: 44rpx;
				height: 44rpx;
				margin-right: 6rpx;
			}
		}

		.perfect_txt {
			height: 34rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;
			text-align: center;
			margin-top: 24rpx;
		}

		.perfect_num {
			height: 122rpx;
			font-weight: 500;
			font-size: 100rpx;
			color: #333333;
			line-height: 117rpx;
			text-align: center;
			margin-top: 4rpx;
		}

		.perfect_dis {
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			width: 70%;
			font-size: 24rpx;
			color: #666666;
			line-height: 28rpx;
			margin-top: 30rpx;

			.perfect_dis_item {
				display: flex;

				view {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
					margin-left: 20rpx;

					img {
						width: 100%;
					}
				}
			}
		}

		.perfect_btn {
			// margin-top: 30rpx;

			button {
				width: 606rpx;
				height: 100rpx;
				background: #2253FF;
				border-radius: 50rpx;
				color: #fff;
				line-height: 100rpx;
			}

			.Rapid_approval {
				width: 140rpx;
				height: 46rpx;
				background: #FF5B27;
				border-radius: 66rpx 66rpx 66rpx 0rpx;
				border: 1rpx solid #FFFFFF;
				position: relative;
				left: 470rpx;
				bottom: -19rpx;
				z-index: 99;
				color: #fff;
				text-align: center;
				line-height: 46rpx;
			}

			.Rapid_approval_view {
				width: 606rpx;
				height: 100rpx;
				background: #2253FF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				color: #fff;
				text-align: center;
				// display: flex;
				// flex-direction: column;
				// justify-items: center;
				align-items: center;
				line-height: 50rpx;
				margin: 0 auto;

				.Rapid_approval_view_text1 {
					font-weight: bold;
					font-size: 28rpx;
					margin: 0;
					padding: 0;
				}

				.Rapid_approval_view_text2 {
					font-weight: 500;
					font-size: 24rpx;
					margin: 0;
					padding: 0;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}


	// .uni-noticebar {
	// 	margin-top: 40rpx;
	// }

	// 公告栏样式
	.noticeBar {
		margin: 0 auto;
		margin-top: 40rpx;
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #F6F8FF;
		font-size: 28rpx;
		color: #333333;
		border-radius: 50rpx;
		display: flex;

		.noticeBar_partition {
			width: 2rpx;
			height: 20rpx;
			background: #D9D9D9;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-top: 30rpx;
			margin-right: 16rpx;
		}

		.list {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
		}
	}

	// 您有额度点击待 领取
	.Limit {
		width: 670rpx;
		height: 148rpx;
		background: #FEE7B5;
		border-radius: 74rpx 74rpx 74rpx 74rpx;
		margin: 40rpx auto;

		img {
			width: 100%;
		}
	}

	.KnowUs {
		margin-top: 40rpx;

		.KnowUs_title {
			margin-left: 40rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		.KnowUs_about {
			margin: 0 auto;
			width: 670rpx;
			height: 144rpx;
			// background: linear-gradient(149deg, #F2F6FE 0%, #E6EDFE 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-top: 20rpx;
			display: flex;
			background-image: url('../../static/Slice 43@2x.png');
			background-size: contain;
			// justify-content: space-between;

			.KnowUs_about_left {
				margin-left: 30rpx;

				.text {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					margin-top: 32rpx;
				}

				.text_con {
					margin-top: 6rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

			}

			.KnowUs_about_right {
				margin-top: 6rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-left: 156rpx;
				line-height: 144rpx;
				img{
					width: 20rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}


		}

		.KnowUs_R {
			margin: 0 auto;
			margin-top: 30rpx;
			width: 670rpx;
			display: flex;

			.KnowUs_repayment {
				width: 324rpx;
				height: 144rpx;
				background: linear-gradient(133deg, #FDF6EA 0%, #FCF5EA 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 144rpx;
				padding-left: 30rpx;
				background-image: url('../../static/Slice 44@2x.png');
				background-size: contain;
			}

			.KnowUs_Fraud {
				width: 324rpx;
				height: 144rpx;
				margin-left: 20rpx;
				background: linear-gradient(134deg, #FFF2EF 0%, #FFE9E4 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 144rpx;
				padding-left: 30rpx;
				background-image: url('../../static/Slice 45@2x.png');
				background-size: contain;

			}


			.KnowUs_label {
				color: #fff;
				font-size: 22rpx;
				border-radius: 0 12rpx 0 12rpx;
				display: inline-block;
				width: 108rpx;
				height: 30rpx;
				text-align: center;
				font-weight: 400;
				line-height: 30rpx;
				position: relative;
				top: -60rpx;
				left: 40rpx;

			}

			.degclory {
				// background: #FFC871;
			}

			.degclorr {
				// background: #FF8A71;
				left: 69rpx;
			}
		}
	}


	.Disclaimers {
		width: 670rpx;
		height: 206rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 26rpx;
		padding: 0 30rpx;

		.Disclaimers_title {
			// width: 112rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #939393;
			line-height: 33rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.Disclaimers_xian {

			width: 38rpx;
			height: 2rpx;
			background: linear-gradient(270deg, #D9D9D9 0%, rgba(217, 217, 217, 0) 100%);
			margin-right: 16rpx;
		}

		.Disclaimers_xian1 {
			width: 38rpx;
			height: 2rpx;
			background: linear-gradient(to right, #D9D9D9 0%, rgba(217, 217, 217, 0) 100%);
			margin-left: 16rpx;
		}

		.Disclaimers_text {
			width: 610rpx;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 1.5;
			margin: 0 auto;
			margin-top: 8rpx;
			color: #C2C2C2;
		}
	}


	.Prompt_login {
		width: 750rpx;
		height: 118rpx;
		background: #E1ECFE;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 86rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-image: url('../../static/Slice 46@2x.png');
		background-size: contain;

		.Prompt_login_left {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.Prompt_login_left_text {
				margin-left: 58rpx;

				text {
					width: 272rpx;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #284C7C;
					line-height: 38rpx;
				}

				view {
					width: 288rpx;
					height: 34rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #6886B1;
					line-height: 28rpx;
					text-align: center;
					padding-top: 10rpx;
				}
			}
		}

		.Prompt_login_buttom {
			width: 172rpx;
			height: 70rpx;
			background: #2253FF;
			border-radius: 126rpx 126rpx 126rpx 126rpx;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
		}
	}
	
	.ke_img{
		width: 41rpx;
		height: 41rpx;
		text-align: center;
		line-height: 110rpx;
		img{
			width: 100%;
		}
	}
</style>